<template>
    <div class="introduce container">
        <div class="title">
            <i class="iconfont icon-tubiao_-2"></i>
            <span>医院服务</span>
        </div>
        <div class="more">
            <div class="zi" v-for="item in 4">
                <i class="iconfont icon-zhifudingjin "></i>
                <span>候诊查询</span>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.introduce {
    background-color: aqua;
    display: flex;
    flex-direction: column;
    .title {
        background-color: rgb(117, 120, 120);
        display: flex;
        justify-self: start;
        align-items: center;
        height: 37px;

        i {
            margin-right: 10px;
        }
    }
    .more{
        flex: 1;
        background-color: aquamarine;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .zi{
            flex-shrink: 0;
            width: 23%;
            height: 80%;
            background-color: burlywood;
            display: flex;
            flex-direction: column;
            border: 1px solid black;
            i{
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 160%;
            }
            span{
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>